<template>
  <!-- 公共表格容器组件 -->
  <div class="multi-platform-table">
    <!-- 平台切换标签页 -->
    <el-tabs
      v-model="activePlatform"
      @tab-click="handleTabChange"
      type="border-card"
    >
      <!-- <el-tab-pane
        v-for="platform in typeArr"
        :key="platform.value"
        :label="platform.label"
        :name="platform.value"
      > -->
      <!-- <sample :activePlatform="activePlatform" /> -->
      <!-- 公共表格组件 -->
      <!-- <common-table 
          :data="currentTableData"
          :loading="loading"
          @sort-change="handleSort"
        /> -->
      <el-tab-pane label="直播合作" name="live">
        <liveindex :row="row" v-if="activePlatform == 'live'" />
      </el-tab-pane>
      <el-tab-pane label="短视频合作" name="video">
        <videoindex :row="row" v-if="activePlatform == 'video'" />
      </el-tab-pane>
      <el-tab-pane label="图文植入" name="img">
        <imgindex :row="row" v-if="activePlatform == 'img'" />
      </el-tab-pane>
      <!-- </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import liveindex from "./live.vue";
import videoindex from "./video.vue";
import imgindex from "./img.vue";
export default {
  dicts: ["sys_sample_name"],
  //   components: { CommonTable },
  components: {
    liveindex,
    videoindex,
    imgindex,
  },
  props: {
    row: {
      type: Object,
      default: () => {},
    },
    // 平台数据配置
    platformData: {
      type: Object,
      default: () => ({
        douyin: [],
        kuaishou: [],
        wechat: [],
      }),
    },
  },

  data() {
    return {
      activePlatform: "live",
      loading: false,
      sortParams: {},
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        pageNum: 1,
        thisPageSize: 10,
        groupLabel: "sku",
        property: "inventoryQuantity0",
        isAsc: false,
      },

      typeArr: [
        { value: "live", label: "直播合作" },
        { value: "video", label: "短视频合作" },
        { value: "img", label: "图文植入" },
      ],
    };
  },

  // computed: {
  //   platforms() {
  //     return [
  //       { label: "item", value: "item" },
  //       { label: "sku", value: "sku" },
  //       { label: "spu", value: "spu" },
  //       // { label: '抖音', value: 'douyin' },
  //       // { label: '快手', value: 'kuaishou' },
  //       // { label: '视频号', value: 'wechat' }
  //     ];
  //   },

  //   currentTableData() {
  //     return this.platformData[this.activePlatform] || [];
  //   },
  // },

  created() {
    // this.handleTabChange({ label: "item", name: "item" });
  },
  methods: {
    handleTabChange(tab) {
      // this.queryParams.groupLabel = tab.name;
      // inventoryAgeDetail(this.queryParams).then((response) => {});
      return;
      this.$emit("platform-change", tab.name);
    },

    handleSort({ column, prop, order }) {
      this.sortParams = {
        sortField: prop,
        sortOrder: order === "ascending" ? "asc" : "desc",
      };
      this.$emit("sort-change", this.sortParams);
    },

    handleDetail(row) {
      this.$emit("row-click", row);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tab-pane {
  height: calc(100vh - 110px);
  // overflow-y: auto;
}
::v-deep .el-tabs__content {
  /* height: 185px;
  border-radius: 4px; */
  // background-color: rgb(240, 242, 245) !important; /* 使用你想要的蓝色 */
}
.multi-platform-table {
  /* background: #fff; */
  padding: 15px;
  border-radius: 4px;
}

.tag-margin {
  margin: 2px;
}

// ::v-deep .el-tabs__header {
//   margin: 0 0 15px;
// }

::v-deep .el-table .cell {
  white-space: nowrap;
}
</style>